<template>
  <view class="container">
    <!-- 记录列表 -->
    <view class="record-list">
      <!-- 循环渲染记录项 -->
      <view class="record-item" v-for="(item, index) in recordList" :key="index">
        <!-- 时间 -->
        <text class="record-time">{{ item.time }}</text>
        
        <!-- 记录详情（分两列布局） -->
        <view class="record-detail">
          <!-- 左列信息 -->
          <view class="detail-left">
            <text class="detail-item">会员姓名: {{ item.name }}</text>
            <text class="detail-item">手机号: {{ item.phone }}</text>
          </view>
          
          <!-- 右列信息 -->
          <view class="detail-right">
            <text class="detail-item">会员卡号: {{ item.cardNo }}</text>
            <text class="detail-item">扣币类型: {{ item.type }}</text>
            <text class="detail-item amount">扣币数量: {{ item.amount }}</text>
          </view>
        </view>
        
        <!-- 分隔线（最后一项不加） -->
        <view class="divider" v-if="index !== recordList.length - 1"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟记录数据
      recordList: [
        {
          time: '2025-10-24 15:00:00',
          name: '张三',
          cardNo: '12345678',
          phone: '152xxxxxxxxx',
          type: '预存款',
          amount: '25'
        },
        {
          time: '2025-10-24 15:00:00',
          name: '张三',
          cardNo: '12345678',
          phone: '152xxxxxxxxx',
          type: '游戏币',
          amount: '25'
        },
        {
          time: '2025-10-24 15:00:00',
          name: '张三',
          cardNo: '12345678',
          phone: '152xxxxxxxxx',
          type: '游戏币',
          amount: '25'
        },
        {
          time: '2025-10-24 15:00:00',
          name: '张三',
          cardNo: '12345678',
          phone: '152xxxxxxxxx',
          type: '预存款',
          amount: '25'
        }
      ]
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.shangmengCoinDeductionRecord')
  	});
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

/* 记录列表容器 */
.record-list {
  background-color: #ffffff;
  border-radius: 8rpx;
  overflow: hidden;
}

/* 单条记录项 */
.record-item {
  padding: 25rpx 30rpx;
}

/* 时间样式 */
.record-time {
  font-size: 28rpx;
  color: #999999;
  display: block;
  margin-bottom: 20rpx;
}

/* 详情区域布局 */
.record-detail {
  display: flex;
  justify-content: space-between;
}

/* 左列信息 */
.detail-left {
  flex: 1;
}

/* 右列信息 */
.detail-right {
  flex: 1;
  text-align: right;
}

/* 详情项样式 */
.detail-item {
  display: block;
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 15rpx;
}

.detail-item:last-child {
  margin-bottom: 0;
}

/* 扣币数量（红色） */
.amount {
  color: #ff3b30;
}

/* 分隔线 */
.divider {
  height: 1px;
  background-color: #eeeeee;
  margin-top: 25rpx;
}
</style>